<template>
  <section id="Menu-Cpn">
        <Menu theme="dark" class="menu-ctn" @on-select="onSelectFun">
          <Submenu :name="item.name" v-for="(item, index) in menuList">
            <template slot="title">
              <Icon :type="item.icon" size="18"/>
              {{ item.title }}
            </template>

            <!--二级菜单文件夹节点-->
            <Submenu :name="it.name" v-if="it.children && it.children.length" v-for="(it, index) in item.children">
              <template slot="title">
                <Icon :type="it.icon" size="18"/>
                {{ it.title }}
              </template>
              <MenuItem :name="is.name" v-for="(is, index) in it.children">
                <Icon :type="is.icon" size="18"/>
                {{ is.title }}
              </MenuItem>
            </Submenu>

            <!--二级菜单叶子节点-->
            <MenuItem :name="it.name" v-if="!it.children || !it.children.length" v-for="(it, index) in item.children">
              <Icon :type="it.icon" size="18"/>
              {{ it.title }}
            </MenuItem>
          </Submenu>
        </Menu>
  </section>
</template>

<script>
import { selectMenuTreeByIdFun } from '../api/apiFun'
export default {
  data () {
    return {
      beforeMenuName: '',
      menuList: []
    }
  },
  created () {
    let userId = JSON.parse(sessionStorage.getItem("userInfo")).userId
    this.doSelectMenuTreeByIdFun(userId)
  },
  methods: {
    // 为了避免NavigationDuplicated: Avoided redundant navigation to current location的报错
    onSelectFun(name) {
      console.log(name)
      // 此处记录上次name和本次做对比.
      if (name !== this.beforeMenuName) {
        this.$router.push({
          name
        })
      }
      this.beforeMenuName = name
    },
    // 根据userId查询menuTree
    doSelectMenuTreeByIdFun(userId) {
      selectMenuTreeByIdFun({userId: userId}).then(res => {
        if(parseInt(res.code) === 0 && res.data.length) {
          this.menuList = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#Menu-Cpn {
  width: 19%;
  height: 98%;
  border-radius: 10px;
  overflow: hidden;
  .menu-ctn {
    width: 100% !important;
    height: 100%;
  }
}
</style>
